<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>缺寝记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          max-height="705"
          style="width: 100%"
        >
          <el-table-column label="ID" prop="id" width="80px" />
          <el-table-column label="姓名" prop="name" width="100px" />
          <el-table-column label="性别" prop="gender" width="100px" />
          <el-table-column label="楼号" prop="dormBuildName" width="100px" />
          <el-table-column label="宿舍号" prop="dormroomId" width="100px" />
          <el-table-column label="缺寝时间" prop="missingTime" width="200px" />
          <el-table-column label="返回时间" prop="returnTime" width="200px" />
          <el-table-column label="缺寝原因" prop="reason" />
          <el-table-column label="宿管" prop="remarks" width="100px" />
        </el-table>
        <!-- 分页 -->
        <div style="margin: 10px 0">
          <el-pagination
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const currentUser = JSON.parse(sessionStorage.getItem("user")); // 获取当前登录用户信息
      const name = currentUser.name; // 假设用户信息中包含 username
      request
        .get("/absent/findbyname/", {
          params: {
            name: name,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.searchQuery,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        });
    },

    handlePageSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },

    handleCurrentPageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
  },
};
</script>

<style scoped>
.el-button {
  margin-left: 10px;
}
</style>